// 秒杀倒计时
{
    // 获取结束时间点时间戳
    var dateEnd = new Date('2022-01-11T18:00:00');
    var endTime = dateEnd.getTime();
    // 获取显示时分秒三个div对象
    var hourDom = document.querySelector('#hour');
    var minDom = document.querySelector('#min');
    var secDom = document.querySelector('#sec');

    // 封装显示时间的函数
    function showTime () {
        // 获取当前时间戳
        var dateNow = new Date();
        var nowTime = dateNow.getTime();

        var t = parseInt((endTime - nowTime)/1000);

        hourDom.innerText = parseInt(t / 3600) < 10 ? '0' + parseInt(t / 3600) : parseInt(t / 3600) ;
        minDom.innerText = parseInt(t % 3600 / 60) < 10 ? '0' + parseInt(t % 3600 / 60) : parseInt(t % 3600 / 60);
        secDom.innerText = parseInt(t % 3600 % 60) < 10 ? '0' + parseInt(t % 3600 % 60) : parseInt(t % 3600 % 60);
    }
    // 页面显示时间
    showTime();

    // 每一秒执行一下显示时间函数
    setInterval(function () {
        showTime();
    }, 1000)


    // 商品滚动
    // 获取所有秒杀商品li
    var ulDom = document.querySelector('.miaosha-goods ul');
    var ms_left = 0;
    var rollTimer = setInterval(function () {
        ulDom.style.left = --ms_left + 'px';
        if (ms_left == -2020) {
            ms_left = 0;
        }
    }, 30)

    ulDom.onmouseenter = function () {
        clearInterval(rollTimer);
    }
    ulDom.onmouseleave = function () {
        rollTimer = setInterval(function () {
            ulDom.style.left = --ms_left + 'px';
            if (ms_left == -2020) {
                ms_left = 0;
            }
        }, 30)
    }
}

// 轮播图
{
    var swiperImgList = [
        './upload/slider-1.png',
        './upload/slider-2.png',
        './upload/slider-3.png',
        './upload/slider-4.jpg'
    ];
    var swiperA = document.querySelector('.swiper a');
    var swiperUl = document.querySelector('.slider-circle');
    var leftArrow = document.querySelector('.l-arrow');
    var rightArrow = document.querySelector('.r-arrow');
    var circles = document.querySelectorAll('.slider-circle li');
    var swiperIndex = 0;
    var flag = true;
    var timer = null;

    function changeImg (index) {
        swiperA.style.backgroundImage = `url(${swiperImgList[index]})`;
        currentCircle(index);
    }

    function currentCircle (index) {
        circles.forEach(function (item) {
            item.className = '';
        })
        circles[index].className = 'current';
    }

    changeImg(swiperIndex);
    
    leftArrow.onclick = function () {
        if (flag == false) {
            return;
        }
        flag = false;
        swiperIndex++;
        swiperIndex = swiperIndex >= swiperImgList.length ? 0 : swiperIndex;
        changeImg(swiperIndex);
        setTimeout(() => {
            flag = true;
        }, 1000)
    }
    rightArrow.onclick = function () {
        if (flag == false) {
            return;
        }
        flag = false;
        swiperIndex--;
        swiperIndex = swiperIndex < 0 ? swiperImgList.length - 1 : swiperIndex;
        changeImg(swiperIndex);
        setTimeout(() => {
            flag = true;
        }, 1000)
    }
    circles.forEach(function (item, index) {
        item.onclick = function () {
            if (flag == false) {
                return;
            }
            flag = false;
            swiperIndex = index;
            changeImg(swiperIndex);
            setTimeout(() => {
                flag = true;
            }, 1000)
        }
    });

    timer = setInterval(() => {
        swiperIndex = ++swiperIndex == 4 ? 0 : swiperIndex;
        changeImg(swiperIndex);
    }, 3000);

    swiperA.onmouseenter = function () {
        clearInterval(timer);
    }
    swiperA.onmouseleave = function () {
        timer = setInterval(() => {
            swiperIndex = ++swiperIndex == 4 ? 0 : swiperIndex;
            changeImg(swiperIndex);
        }, 3000);
    }
    
    leftArrow.onmouseenter = function () {
        clearInterval(timer);
    }
    rightArrow.onmouseenter = function () {
        clearInterval(timer);
    }
    swiperUl.onmouseenter = function () {
        clearInterval(timer);
    }
}



// 循环查询关键词
{
    var searchTxt = document.querySelector('.search input');
    var keywords = ['lv包包', '迪奥口红', '机械键盘', 'gtx3090'];
    var keywords_index = 0;
    searchTxt.placeholder = keywords[keywords_index];
    setInterval(function () {
        keywords_index++;
        if (keywords_index >= 4) {
            keywords_index = 0;
        }
        searchTxt.placeholder = keywords[keywords_index];
    }, 2000);
}

// 电梯导航
{
    var menu = document.querySelector('.menu');
    var ms = document.querySelector('.miaosha');
    var floors = document.querySelectorAll('.floor');
    var tops = [];

    for (var i = 0; i < floors.length; i++) {
        tops.push(floors[i].offsetTop);
    }

    var tooltips = document.querySelectorAll('.menu li');
    tooltips.forEach(function (item, index) {
        item.onclick = function () {
            var startPos = window.scrollY;
            var targetPos = tops[index];
            
            if (startPos > targetPos) {
                up(startPos, targetPos, index);
            } else {
                down(startPos, targetPos, index);
            }
        }
    })
    function down (startPos, targetPos, index) {
        var timer = setInterval(function () {
            if (startPos < targetPos) {
                startPos += 20;
                startPos = startPos > targetPos ? targetPos : startPos;
                window.scrollTo(0, startPos);  
            } else {
                activeFloor(index);
                clearInterval(timer);
            }
        }, 1);
    }

    function up (startPos, targetPos, index) {
        var timer = setInterval(function () {
            if (startPos > targetPos)  {
                startPos -= 20;
                startPos = startPos < targetPos ? targetPos : startPos;
                window.scrollTo(0, startPos);
            } else {
                activeFloor(index);
                clearInterval(timer);
            }
        }, 1);
    }

    function activeFloor (index) {
        for (var i = 0; i < tooltips.length; i++) {
            tooltips[i].className = '';
        }
        tooltips[index].className = 'active';
    }

    window.onscroll = function () {
        console.log(window.scrollY);
        menuDisplay();
        if (window.scrollY > tops[0] && window.scrollY < tops[1]) {
            activeFloor(0);
        } else if (window.scrollY > tops[1] && window.scrollY < tops[2]) {
            activeFloor(1);
        } else if (window.scrollY > tops[2] && window.scrollY < tops[3]) {
            activeFloor(2);
        } else if (window.scrollY > tops[3]){
            activeFloor(3);
        }
    }

    function menuDisplay () {
        if (window.scrollY < ms.offsetTop) {
            menu.style.display = 'none';
        } else {
            menu.style.display = 'block';
        }
    }
}